﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link href="../../static/css/font.css" rel="stylesheet" />
    <link href="../../static/css/weadmin.css" rel="stylesheet" />
    <link href="../../lib/layui/css/layui.css" rel="stylesheet" />
    <script src="../../../lib/layui/layui.js"></script>
    <style>
        .layui-form{
            margin-left:10%;
        }
        .layui-tab-title .layui-this {
            background: #00ffff;
        }
        .layui-tab-title li {
            border: none;
            display: block;
        }
        .layui-tab-title {
            float: left;
            width: 10%;
            box-sizing: border-box;
            margin-top:20px;
        }
        .layui-tab-content {
            float: left;
            width: 80%;
        }
    </style>
</head>
<body>
    <div class="layui-tab">
        <div class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">起止日期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="TPReleaseStart" />
                </div>
                <div class="layui-input-inline layui-form-label-inner">
                    <input type="text" class="layui-input" id="TPReleaseEnd" name="TPReleaseEnd" />
                </div>
                <label class="layui-form-label">计划名称:</label>
                <div class="layui-inline">
                    <select id="TPID" name="TPID" class="valid" style="width:200px"></select>
                </div>
                <button type="button" class="layui-btn layui-btn-primary" id="find" name="查询"><i class="layui-icon">&#xe615;</i>查询</button>
            </div>
        </div>
        <ul class="layui-tab-title">
            <li class="layui-this">车间</li>
            <li>车队</li>
            <li>乘务员</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>车间名称</th>
                            <th>参培次数</th>
                            <th>培训内容数量</th>
                        </tr>
                    </thead>
                    <tr>
                        <td>青岛车间</td>
                        <td>22</td>
                        <td>29</td>
                    </tr>
                    <tr>
                        <td>淄博车间</td>
                        <td>15</td>
                        <td>31</td>
                    </tr>
                    <tr>
                        <td>兖州车间</td>
                        <td>26</td>
                        <td>42</td>
                    </tr>
                    <tr>
                        <td>聊城车间</td>
                        <td>21</td>
                        <td>35</td>
                    </tr>
                </table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>车队名称</th>
                            <th>参培次数</th>
                            <th>培训内容数量</th>
                        </tr>
                    </thead>
                    <tr>
                        <td>青岛一车队</td>
                        <td>22</td>
                        <td>26</td>
                    </tr>
                    <tr>
                        <td>青岛二车队</td>
                        <td>15</td>
                        <td>17</td>
                    </tr>
                    <tr>
                        <td>聊城一车队</td>
                        <td>26</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td>聊城二车队</td>
                        <td>21</td>
                        <td>29</td>
                    </tr>
                    <tr>
                        <td>兖州一车队</td>
                        <td>26</td>
                        <td>40</td>
                    </tr>
                    <tr>
                        <td>兖州二车队</td>
                        <td>21</td>
                        <td>32</td>
                    </tr>
                </table>
            </div>
            <div class="layui-tab-item">
                <div class="layui-inline">
                    <label class="layui-form-label">车间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="TPReleaseStart" />
                    </div>

                    <button type="button" class="layui-btn layui-btn-primary" id="find" name="查询"><i class="layui-icon">&#xe615;</i>查询</button>
                </div>
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>乘务员</th>
                            <th>参培次数</th>
                            <th>培训内容数量</th>
                            <th>详细</th>
                        </tr>
                    </thead>
                    <tr>
                        <td>沈殿钧</td>
                        <td>22</td>
                        <td>26</td>
                        <td><button type="button" class="layui-btn layui-btn-normal" onclick="CourseContentDetailRep();">详细</button></td>
                    </tr>
                    <tr>
                        <td>张雪鹏</td>
                        <td>15</td>
                        <td>19</td>
                        <td><button type="button" class="layui-btn layui-btn-normal">详细</button></td>
                    </tr>
                    <tr>
                        <td>王露晓</td>
                        <td>26</td>
                        <td>28</td>
                        <td><button type="button" class="layui-btn layui-btn-normal">详细</button></td>
                    </tr>
                    <tr>
                        <td>滑冰</td>
                        <td>21</td>
                        <td>29</td>
                        <td><button type="button" class="layui-btn layui-btn-normal">详细</button></td>
                    </tr>
                    <tr>
                        <td>马强</td>
                        <td>26</td>
                        <td>27</td>
                        <td><button type="button" class="layui-btn layui-btn-normal">详细</button></td>
                    </tr>
                    <tr>
                        <td>杜振宇</td>
                        <td>21</td>
                        <td>30</td>
                        <td><button type="button" class="layui-btn layui-btn-normal">详细</button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script>
        var th = 0;
        var tw = 0;
        function CourseContentDetailRep() {
            //if (selectCurrentID <= 0) {
            //    layer.msg("请选择一条信息!"); return;
            //}
            layui.use(['layer', 'jquery'], function () {
                var h = th * 1.8;
                var w = tw * 0.7;
                var layer = layui.layer;
                var $ = layui.jquery;
                var contentPage = "traincourseDetailContentcount.html?TPID=0&TPName=0";
                var title = "培训内容详细";
                layer.open({
                    title: title,
                    type: 2,
                    area: [w + "px", h + "px"],
                    //btn: ['确定'],
                    content: contentPage,
                    yes: function (index) {
                        //var res = window["layui-layer-iframe" + index].selectdata();
                        //$("#PrePlanName").val(res.RefName);
                        //prePlanId = res.RefID;
                        //CPID = res.CPID;
                        layer.close(index);
                    }
                });

            });
        };
        layui.use(['form', 'laydate', 'table', 'jquery', 'element', 'layer', 'tree', 'util'], function () {
            var laydate = layui.laydate;
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            laydate.render({ elem: '#TPReleaseStart', trigger: 'click'});
            laydate.render({ elem: '#TPReleaseEnd', trigger: 'click' });
            th = $(document).height() * 0.5;
            tw = $(document).width();


            //加载部门信息，角色信息，机务段信息
            $.ajax({
                url: ApiUrl + "TrainPlan/Sel",
                type: 'get',
                headers: {
                    "userid": JSON.parse(window.localStorage.authInfo).UserId,
                    "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                },
                success: function (data) {
                    if (data.StatusCode == 200) {
                        $("#TPID").append("<option value=''></option>");
                        $(data.Data).each(function (index, item) {
                            $("#TPID").append("<option value='" + item.TPID + "'>" + item.TPName + "</option>");
                        });
                        form.render();//必须，不然动态加载项不显示
                    }
                    else if (data.StatusCode == 403) {
                        layer.alert(data.Info, function () {
                            location.href = './login.html';
                        })
                    }
                    else {
                        layer.msg(data.Info);
                    }
                }
            });


            //触发事件
            var active = {
                tabAdd: function () {
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                        , content: '内容' + (Math.random() * 1000 | 0)
                        , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                }
                , tabDelete: function (othis) {
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除：“商品管理”


                    othis.addClass('layui-btn-disabled');
                }
                , tabChange: function () {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };

            $('.site-demo-active').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function (elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });

        });
    </script>
</body>
</html>    